<template>
  <u-popup v-model="showPopup" mode="bottom" height="90%" safe-area-inset-bottom closeable duration="120"
    @close="onClose">
    <view class="select">
      <view class="select-title">
        {{ title }}
      </view>

      <view v-if="mode == 'multilevel'" class="select-list trade">
        <view class="list-item" v-for="(item, index) in options" :key="index">
          <view class="list-item-title">
            {{ item[labelName] }}
          </view>
          <view class="list-item-children">
            <view class="list-item-child" :class="{ active: isActive(subItem[valueName]) }"
              v-for="subItem in item.children" :key="subItem[valueName]" @click="handleChildClick(subItem)">
              {{ subItem[labelName] }}</view>
          </view>
        </view>
      </view>

      <view v-else class="select-list">
        <view class="select-item u-border-top" :class="{ active: isActive(item[valueName]) }"
          v-for="(item, index) in options" :key="index" @click="handleChildClick(item)">
          {{ item[labelName] }}
          <text class="icon icon-selected"></text>
        </view>
      </view>
      <view class="buttons">
        <button class="cancel button" @click="handleCancel">取消</button>
        <button class="confirm button" @click.native="handleConfirm">确定 <span
            v-if="selectedLength!=0">（{{selectedLength}}）</span></button>
      </view>

    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    mode: String,
    show: {
      type: Boolean,
      default: false,
    },
    title: String,
    options: {
      type: Array,
      default: function () {
        return [];
      },
    },
    value: [String, Array],
    valueName: {
      type: String,
      default: "value",
    },
    labelName: {
      type: String,
      default: "label",
    },
  },
  data() {
    return {
      showPopup: false,
      selectedLength: "0",
      selecetedButNotConfirmIdList: [],
    };
  },
  created() {
    console.log(this.value);
  },
  watch: {
    show(newVal) {
      this.showPopup = newVal;
    },
    value(newVal) {
      if (newVal.length) {
        this.selectedLength = newVal.length;
      } else {
        this.selectedLength = 0;
      }
    },
    showPopup(newVal) {
      if (this.show != newVal) this.$emit("update:show", newVal);
    },
  },
  methods: {
    handleChildClick(subItem) {
      this.$emit("selected", subItem);
      //先标记一下选择了但是没有提交搜索的id,如果取消需要将子组件中的去掉
      console.log(this.value);

      this.selecetedButNotConfirmIdList.push(subItem);
      console.log("处理后：", this.selecetedButNotConfirmIdList);
    },
    handleCancel() {
      const list = this.selecetedButNotConfirmIdList;
      this.$emit("cancel", list);
    },
    handleConfirm() {
      this.$emit("close");
    },
    isActive(value) {
      if (Array.isArray(this.value)) {
        for (let i = 0; i < this.value.length; i++) {
          if (this.value[i] == value) {
            return true;
          }
        }
        return false;
      } else {
        return this.value == value;
      }
    },
    onClose() {
      this.selecetedButNotConfirmIdList = [];
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.select {
  position: relative;
  height: 100vh;
  padding: 0 32rpx;
  font-size: $uni-font-size-lg;
  color: #333333;

  &-title {
    position: sticky;
    top: 0;
    padding: 32rpx;
    text-align: center;
    font-weight: 800;
    background: #fff;
    color: #222222;
  }

  &-item {
    position: relative;
    padding: 36rpx 0;

    &.active {
      color: #ff6239;

      .icon-selected {
        display: inline-block;
      }
    }

    .icon-selected {
      display: none;
      position: absolute;
      right: 0;
      top: 40rpx;
      width: 32rpx;
      height: 32rpx;
      background-image: url($img-base + "library/selected.png");
    }
  }

  .list-item {
    &-title {
      margin-bottom: 20rpx;
      font-size: $uni-font-size-lg;
      font-weight: 500;
      color: #333333;
    }

    &-children {
      margin-bottom: 36rpx;
    }

    &-child {
      display: inline-block;
      margin: 0 12rpx 12rpx 0;
      padding: 12rpx 32rpx;
      border: 2rpx solid transparent;
      font-size: $uni-font-size-base;
      color: #333333;
      background: #f9fafc;
      border-radius: 8rpx;

      &.active {
        border-color: #ff6239;
        color: #ff6239;
        background: #fff9f4;
      }
    }
  }
  .buttons {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: calc(32rpx + constant(safe-area-inset-bottom));
    bottom: calc(32rpx + env(safe-area-inset-bottom));
    width: calc(100vw - 64rpx);
    border: 0;
    button {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 88rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      outline: none;
      padding: 32rpx 0;
      font-size: 28rpx;
      border-radius: 44rpx;
      &::after {
        border: none;
      }
    }
    .confirm {
      background-color: #ff6239;
      color: white;
      width: 424rpx;
    }
    .cancel {
      width: 237rpx;
      background: #ededed;
    }
  }
}
</style>